<template>
  <div class="all">
    <div class="head">
      <div class="brandName">
        <div class="GEBOSS"></div>
        <div class="NET"></div>
      </div>
      <div class="status">
        <span class="stuatusSpan">服务器状态：{{ status }}</span>
      </div>
      <div class="Date">
        <span class="DateSpan">{{ Date }}</span>
      </div>
    </div>
    <div class="main">
      <!-- 左边设备列表 -->
      <div class="mainBig">
        <component :is="currentCompoment"></component>
        <!-- <fenquView /> -->
      </div>
      <!-- 右边歌曲播放列表 -->
      <div class="mainList">
        <div class="playList">
          <div class="musicMenu">
            <div
              class="musicMenuImdex"
              v-for="(item, index) in musicMenuList"
              :key="index"
            >
              {{ item.id }}
            </div>
          </div>
          <div class="musicl">
            <div class="fenge"></div>
            <div
              class="musicList"
              v-for="(item, index) in musicPlayList"
              :key="index"
            >
              {{ item.musicName }}
            </div>
          </div>
          <div class="fenge"></div>
          <div class="playOrder">
            <div
              v-for="(item, index) in orderlist"
              class="orderButton"
              @click="orderButtonClick(index)"
            >
              <el-tooltip
                effect="dark"
                :content="item.content"
                placement="top-start"
              >
                <el-button
                  type="info"
                  class="iconfont"
                  :class="[
                    item.iconName,
                    { btn: currentButtonIndex === index },
                  ]"
                  circle
                ></el-button>
              </el-tooltip>
            </div>
          </div>
        </div>
        <!-- 音量调节 -->
        <div class="volumn">
          <div class="thisVolumn">
            <span>当 前 音 量 : {{ value1 }}</span>
            <div class="vulumn"></div>
            <div class="block">
              <el-slider v-model="value1"></el-slider>
            </div>
          </div>
          <div class="preVolumn">
            <span>预 听 音 量11 : {{ value2 }}</span>
            <div class="vulumn"></div>
            <div class="block">
              <el-slider v-model="value2"></el-slider>
            </div>
          </div>
        </div>
      </div>
      <!-- 最右侧按钮 -->
      <div class="mainRight">
        <div class="rightButtonContentTop">
          <div
            v-for="(item, index) in buttonList1"
            class="button"
            @click="changeBgTop(item, index)"
            :class="{ isSected: currentTopIndex === index }"
          >
            <span class="buttonIcon iconfont" :class="item.class"></span>
            <span :key="item">{{ item.name }}</span>
          </div>
        </div>
        <div class="rightButtonContentBottom">
          <div
            v-for="(item, index) in buttonList2"
            class="button"
            @click="
              changeBg(item, index);
              changeComponent(item, index);
            "
            :class="{ isSected: currentDownIndex === index }"
          >
            <span class="buttonIcon iconfont" :class="item.class"></span>
            <span :key="item">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="under">
      <div
        class="button"
        v-for="(item, index) in buttonList3"
        @click="changeBgUnder(item, index)"
        :class="{ isSected: currentUnderIndex === index }"
      >
        <span class="buttonIcon iconfont" :class="item.class"></span
        ><span :key="item">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import componentList from "./components/listView.vue";
import componentFenzu from "./components/fenzuListView.vue";
import fenquView from "./components/fenquView.vue";

//const showEquip =ref(true);

const showComponent = ref(2);
const status = ref("空闲");
const Date = ref("11.11.11");
const router = useRouter();
//播放顺序的按钮
const orderlist = ref([
  {
    iconName: "icon-danquxunhuan",
    content: "单曲播放",
  },
  {
    iconName: "icon-22_suijibofang",
    content: "随机循环",
  },
  {
    iconName: "icon-liebiaoxunhuan",
    content: "列表循环",
  },
  {
    iconName: "icon-danquxunhuan1",
    content: "单曲循环",
  },
  {
    iconName: "icon-shunxubofang",
    content: "顺序播放",
  },
]);

const buttonList1 = ref([
  {
    class: "icon-quanxuan",
    name: "全 选99",
  },
  { class: "icon-gaojing", name: "告 警" },
  {
    class: "icon-lianxi",
    name: "寻 呼",
  },
  {
    class: "icon-remind",
    name: "钟 声",
  },
  {
    class: "icon-bofang",
    name: "播 放",
  },
  {
    class: "icon-tingzhi",
    name: "停 止",
  },
]);
const buttonList2 = ref([
  {
    class: "icon-fenzu",
    name: "分 组",
    currentCompoment: componentFenzu,
  },
  {
    class: "icon-fenquweixuanzhong",
    name: "分 区",
    currentCompoment: fenquView,
  },
  {
    class: "icon-liebiao",
    name: "列 表",
    currentCompoment: componentList,
  },
  {
    class: "icon-ditu",
    name: "地 图",
  },
  {
    class: "icon-jiankong",
    name: "监 控",
  },
]);
const buttonList3 = ref([
  {
    class: " icon-dianyuan",
    name: "电 源 管 理",
    routePath: "/chargeManage",
  },
  { class: "icon-kongzhi", name: "程 序 控 制", routePath: "/programMonitor" },
  {
    class: "icon-dingshirenwu",
    name: "定 时 任 务",
    routePath: "/setTimePoint",
  },
  {
    class: "icon-yulan",
    name: "今 日 预 览",
    routePath: "/viewToday",
  },
  {
    class: "icon-jianting2",
    name: "输 出 监 听",
  },
  {
    class: " icon-monitor",
    name: "现 场 监 听",
  },
  { class: "icon-jinzhi", name: "停 止 监 听" },
  {
    class: "icon-icon_ear_line",
    name: "节 目 预 听",
  },
  {
    class: "icon-kuaijie",
    name: "快 捷1 ",
  },
  {
    class: "icon-kuaijie",
    name: "快 捷 2",
  },
  {
    class: "icon-shezhi-shezhi-tianchong",
    name: "设置",
    routePath:"/sheZhi",
  },
]);

const equipList = ref([
  {
    name: "",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
  {
    name: "55",
  },
]);
//播放列表（上面part）
const musicMenuList = ref([
  {
    id: "00",
  },
  {
    id: "11",
  },
  {
    id: "22",
  },
  {
    id: "00",
  },
  {
    id: "11",
  },
  {
    id: "22",
  },
  {
    id: "00",
  },
  {
    id: "11",
  },
  {
    id: "22",
  },
  {
    id: "00",
  },
  {
    id: "11",
  },
  {
    id: "22",
  },
  {
    id: "00",
  },
  {
    id: "11",
  },
  {
    id: "22",
  },
]);
//播放音乐（下面part）
const musicPlayList = ref([
  { musicName: "我怀念的" },
  { musicName: "好运来" },
  { musicName: "radiogaga2222222222222222222333333333333333" },
]);
const pageSize = ref(56); //单页面显示多少个
const currentPage = ref(1); //当前页面
const value1 = ref(3); //现在音量
const value2 = ref(2); //预听音量
const currentTopIndex = ref(); //主页面分组分区当前选中索引righttop
const currentDownIndex = ref(1); //主页面分组分区当前选中索引rightbottom
const currentUnderIndex = ref(); //主页面分组分区当前选中索引underbottom
const currentButtonIndex = ref(0); //播歌顺序选中索引
const currentCompoment = ref(fenquView);
const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条 `);
  pageSize.value = val;
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
};
const changeBgTop = (_item, index) => {
  currentTopIndex.value = index;
};
const changeBg = (_item, index) => {
  currentDownIndex.value = index;
};

// const router = useRouter();
const changeBgUnder = (_item, index) => {
  currentUnderIndex.value = index;
  router.push(_item.routePath);
  console.log("_item.routePath", _item.routePath);
};
const orderButtonClick = (index) => {
  currentButtonIndex.value = index;
  // bgcolor.value= "linear-gradient(rgb(30, 57, 87), rgb(123, 223, 249))"
  var buttons = document.querySelectorAll(".iconfont");
  buttons.forEach;
  console.log(this);
};

const changeComponent = (item, index) => {
  console.log("11", item);
  currentDownIndex.value = index;
  currentCompoment.value = item.currentCompoment;
  console.log();
  // showEquip.value =!showEquip.value;
  // showComponent.value = 1;

  // console.log(item, "click");
};

onBeforeMount(() => {});
onMounted(() => {});
onBeforeUpdate(() => {});
onUpdated(() => {});
onBeforeUnmount(() => {});
onUnmounted(() => {});
</script>

<style scoped lang="less">
@import "./index.less";
@import url("./font/iconfont.css");
@import url("./font/iconfont2.css");
</style>
<!-- <style scoped src="./index.css">
</style> -->
